[조혜진] Week14 #430

MEGUMMY1 · 2024-05-16T14:58:39Z

요구사항

기본

로그인/회원가입시 성공 응답으로 받은 accessToken을 로컬 스토리지에 저장합니다.
로그인/회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 “/folder” 페이지로 이동합니다.
“회원 가입하기”를 클릭하면 ‘/signup’ 페이지로 이동합니다.
이메일 input에 placeholder는 “이메일을 입력해 주세요.” 비밀번호 input에 placeholder는 “비밀번호를 입력해 주세요.” 로 설정해 주세요.
이메일 input에서 focus out 할 때, 값이 없을 경우 아래에 “이메일을 입력해 주세요.” 에러 메세지를 보입니다.
이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 아래에 “올바른 이메일 주소가 아닙니다.” 에러 메세지를 보입니다.
비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해 주세요.” 에러 메세지를 보입니다.
로그인 실패하는 경우, 이메일 input 아래에 “이메일을 확인해 주세요.”, 비밀번호 input 아래에 “비밀번호를 확인해 주세요.” 에러 메세지를 보입니다.
로그인 버튼 클릭 또는 Enter키 입력으로 로그인 실행돼야 합니다.
https://bootcamp-api.codeit.kr/docs 에 명세된 “/api/sign-in”으로 { “email”: “[email protected]”, “password”: “sprint101” } POST 요청해서 성공 응답을 받으면 “/folder”로 이동합니다.
소셜 로그인에 구글 아이콘 클릭시 ‘https://www.google.com’ 카카오 아이콘 클릭시 ‘https://www.kakaocorp.com/page’ 로 이동하게 해주세요.
“회원 가입하기”를 클릭하면 ‘/signin’ 페이지로 이동합니다.
이메일 input에 placeholder는 “이메일을 입력해 주세요.” 비밀번호 input에 placeholder는 “영문, 숫자를 조합해 8자 이상 입력해 주세요.” 비밀번호 확인 input에 placeholder는 “비밀번호와 일치하는 값을 입력해 주세요.” 로 설정해 주세요.
이메일 input에서 focus out 할 때, 값이 없을 경우 “이메일을 입력해주세요.” 에러 메세지를 보입니다.
이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 “올바른 이메일 주소가 아닙니다.” 에러 메세지를 보입니다.
비밀번호 input에서 focus out 할 때, 값이 8자 미만으로 있거나 문자열만 있거나 숫자만 있는 경우, “비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.” 에러 메세지를 보입니다.
비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input 아래에 “비밀번호가 일치하지 않아요.” 에러 메세지를 보입니다.
회원가입을 실행할 경우, 문제가 있는 경우 문제가 있는 input에 에러 메세지로 알립니다.
회원가입 버튼 클릭 또는 Enter키 입력으로 회원가입 실행돼야 합니다.
이메일 input focus out 할 때 이메일 중복 확인은 “/api/check-email” POST 요청해서 확인합니다. 중복된 경우 “이미 사용 중인 이메일입니다.” 에러 메세지를 보입니다. (중복된 이메일 확인은 “[email protected]”을 활용해 주세요.)
유효한 회원가입 형식의 경우 “/api/sign-up” POST 요청하고 성공 응답을 받으면 “/folder”로 이동합니다.

심화

로그인, 회원가입 기능에 react-hook-form을 활용해 주세요.

주요 변경사항

로그인, 회원가입 페이지 구현

스크린샷

멘토에게

choinashil

요구사항 거의 다 작업하셨군요 수고 많으셨어요!! 💯
전체적으로 깔끔하게 잘 작성해주셨고, 약간의 중복 코드 개선을 고민해보시면 좋을 것 같아요!

choinashil · 2024-05-21T13:53:07Z

pages/folder.tsx

+            <Header />
+            <Main />
+            <Footer />


페이지마다 Header, Footer 가 반복된다면 Layout 컴포넌트를 만들어 분리하는 것도 방법입니다!

choinashil · 2024-05-21T13:55:22Z

src/Components/Input/Input.tsx

+        if (!value) {
+            setErrorMessage(placeholder);
+        } else if (id === "email" && !validateEmail(value)) {
+            setErrorMessage("올바른 이메일 주소가 아닙니다.");


보통 요런 에러메세지도 상수로 분리해서 관리하곤 합니다!
코드에 텍스트가 섞여있으면 나중에 수정해야할 때 코드 내에서 찾는 게 번거롭기도 하고,
동일한 텍스트가 여러 케이스에서 사용되는 경우도 있어서요

choinashil · 2024-05-21T14:01:24Z

src/Components/Input/Input.tsx

+                className={`${styles.input} ${
+                    errorMessage || externalErrorMessage ? styles.invalid : ""
+                }`}


제가 멘토링 때 알려드린 classnames 라이브러리를 요럴 때 쓰시면 편합니다!

choinashil · 2024-05-21T14:02:03Z

src/Components/Input/Input.tsx

+                    className={`${styles.eye_button} ${passwordVisible ? styles.on : ""}`}
+                    onClick={handleEyeToggle}
+                    type='button'
+                ></button>


내부에 자식 없으면 self closing 으로 많이 써요

Suggested change

></button>

/>

choinashil · 2024-05-21T14:03:28Z

src/Components/SignIn/SignIn.tsx

+import { useRouter } from "next/router";
+
+function SignIn() {
+    const [email, setEmail] = useState<string>("");


타입스크립트는 할당된 값을 참조하여 타입 추론을 하기 때문에 이 경우에는 명시적으로 타입 지정하지 않아도 됩니다!

Suggested change

const [email, setEmail] = useState<string>("");

const [email, setEmail] = useState("");

(초기값 '' 을 보고 알아서 타입을 string 으로 유추함)

choinashil · 2024-05-21T14:16:57Z

src/Components/SignUp/SignUp.tsx

+    useEffect(() => {
+        const accessToken = localStorage.getItem("accessToken");
+        if (accessToken) {
+            router.push("/folder");
+        }
+    }, [router]);


이것도 여러번 반복되니 커스텀훅으로 분리해도 좋겠네요 !

choinashil · 2024-05-21T14:17:42Z

src/Components/SignUp/SignUp.tsx

+        if (emailStatus) {
+            setEmailError(emailStatus);
+        } else {
+            setEmailError("");
+        }


요렇게도 바꿀 수 있겠군요

Suggested change

if (emailStatus) {

setEmailError(emailStatus);

} else {

setEmailError("");

}

setEmailError(emailStatus || '');

choinashil · 2024-05-21T14:21:43Z

src/hooks/useUser.ts

+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const response = await fetch(`${BASE_URL}check-email`, {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(body),
+                });
+                const data = await response.json();
+                setData(data);
+                if (response.status === 409) {
+                    setStatus("이미 사용 중인 이메일입니다.");
+                } else {
+                    setStatus("");
+                }
+            } catch (error) {
+                console.error("Error post data:", error);
+            }
+        };
+
+        if (body.email) {
+            fetchData();
+        }
+    }, [body.email]);


useEffect 쓰지 않고 input 에 change 이벤트 실행 시마다 확인하는 방법도 있을 것 같아요!

현재 방식 유지하더라도 오늘 배운 debounce 활용해보면 좋을 것 같고요!

MEGUMMY1 added 6 commits May 16, 2024 14:27

Feat: Sign up page

d62c0b4

Feat: Sign up api 연결

610bc27

Remove: [out]빌드 폴더 삭제

1011e5c

Feat: Sign in page

651d442

Remove: [sign] 폴더 삭제

bde3a2a

Fix: 로그인 경로 수정

8d18e39

MEGUMMY1 requested a review from choinashil May 16, 2024 15:00

MEGUMMY1 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label May 16, 2024

choinashil approved these changes May 21, 2024

View reviewed changes

choinashil merged commit c222c83 into codeit-bootcamp-frontend:part3-조혜진 May 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[조혜진] Week14 #430

[조혜진] Week14 #430

MEGUMMY1 commented May 16, 2024

choinashil left a comment

choinashil May 21, 2024

choinashil May 21, 2024

choinashil May 21, 2024

choinashil May 21, 2024

choinashil May 21, 2024

choinashil May 21, 2024

choinashil May 21, 2024

choinashil May 21, 2024

	const [email, setEmail] = useState<string>("");
	const [email, setEmail] = useState("");

[조혜진] Week14 #430

[조혜진] Week14 #430

Conversation

MEGUMMY1 commented May 16, 2024

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

choinashil left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment